<style>
  :host {
    --nearby-page-space-block: 26px;
    --nearby-page-space-inline: 32px;
    --nearby-page-space-large-inline: 42px;
  }

  #centerContent {
    background: linear-gradient(to top,
        var(--nearby-page-linear-gradient-color-start) 5%, transparent 50%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    overflow: hidden;
    padding: 0 32px;
    position: relative;
  }

  #errorSection {
    align-items: flex-start;
    display: flex;
    flex-direction: row;
    padding: 8px;
  }

  #error {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    font-size: 12px;
  }

  #errorTitle {
    color: var(--cros-text-color-alert);
    font-weight: bold;
    margin: 3px 0;
  }

  #errorDescription {
    color: var(--cros-text-color-secondary);
    line-height: 13px;
  }

  #errorIcon {
    fill: var(--cros-icon-color-alert);
    flex-shrink: 0;
    height: 20px;
    margin-inline-end: 12px;
    width: 20px;
  }

  #help {
    align-items: flex-start;
    color: var(--cros-text-color-secondary);
    display: flex;
    flex-direction: row;
    font-size: 9px;
    line-height: 12px;
    margin-block-end: 8px;
  }

  #helpText {
    margin: auto;
  }

  #helpText a {
    color: var(--cros-text-color-prominent);
    text-decoration: none;
  }

  #infoIcon {
    flex-shrink: 0;
    height: 20px;
    margin-inline-end: 12px;
    width: 20px;
  }

  #process-row {
    align-items: flex-start;
    display: flex;
    flex-grow: 1;
    justify-content: space-between;
    margin-block-end: 24px;
    margin-block-start: 24px;
    overflow: hidden;
  }

  .device-list-container {
    align-self: stretch;
    display: block;
    margin-top: 12px;
    overflow: auto;
    width: 200px;
  }

  cr-lottie {
    bottom: 0;
    height: 100px;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
  }

  #placeholder {
    align-self: center;
    color: var(--cros-text-color-secondary);
    font-size: 13px;
    line-height: 20px;
    margin-inline-end: var(--nearby-page-space-large-inline);
  }

  nearby-device {
    animation: 200ms cubic-bezier(0.4, 0, 0.2, 1) slide-up;
    animation: 200ms linear fade-in;
  }

  @keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }

  @keyframes slide-up {
    0% { transform: translateY(2px); }
    100% { transform: translateY(0); }
  }
</style>

<nearby-page-template title="$i18n{nearbyShareDiscoveryPageTitle}"
        sub-title="$i18n{nearbyShareDiscoveryPageSubtitle}"
        action-button-label="$i18n{nearbyShareActionsNext}"
        action-button-event-name="next"
        action-disabled="[[!selectedShareTarget]]"
        cancel-button-label="$i18n{nearbyShareActionsCancel}"
        cancel-button-event-name="close"
        close-only="[[errorTitle_]]">
  <div id="centerContent" slot="content">
    <iron-media-query query="(prefers-color-scheme: dark)"
        query-matches="{{isDarkModeActive_}}">
    </iron-media-query>
    <cr-lottie animation-url="[[getAnimationUrl_(isDarkModeActive_)]]"
        autoplay="true">
    </cr-lottie>
    <div id="process-row">
      <nearby-preview payload-preview="[[payloadPreview]]"
          disabled="[[errorTitle_]]">
      </nearby-preview>
      <template is="dom-if" if="[[!errorTitle_]]" restamp>
        <div id="placeholder"
            hidden="[[!isShareTargetsEmpty_(shareTargets_.*)]]">
          $i18n{nearbyShareDiscoveryPagePlaceholder}
        </div>
        <template is="dom-if" if="[[!isShareTargetsEmpty_(shareTargets_.*)]]">
          <div class="device-list-container" aria-live="polite">
            <array-selector id="selector" items="{{shareTargets_}}"
                selected-item="{{selectedShareTarget}}">
            </array-selector>
            <template is="dom-repeat" items="[[shareTargets_]]" id="deviceList">
              <nearby-device tabindex$="[[getTabIndexOfShareTarget_(item, selectedShareTarget, shareTargets_.*)]]"
                  share-target="[[item]]"
                  is-selected="[[isShareTargetSelected_(item, selectedShareTarget)]]"
                  role="radio"
                  aria-checked$="[[isShareTargetSelectedToString_(item, selectedShareTarget)]]"
                  on-click="onShareTargetClicked_"
                  on-keydown="onKeyDownForShareTarget_">
              </nearby-device>
            </template>
          </div>
        </template>
      </template>
    </div>
    <!-- TODO(crbug.com/1149546) factor error section into its own component -->
    <template is="dom-if" if="[[errorTitle_]]">
      <div id="errorSection">
        <iron-icon id="errorIcon" icon="nearby20:info"></iron-icon>
        <div id="error" role="alert" aria-labelledby="errorTitle"
            aria-describedby="errorDescription">
          <div id="errorTitle" aria-hidden="true">[[errorTitle_]]</div>
          <div id="errorDescription" aria-hidden="true">
            [[errorDescription_]]
          </div>
        </div>
      </div>
    </template>
    <template is="dom-if" if="[[!errorTitle_]]">
      <div id="help">
        <iron-icon id="infoIcon" icon="nearby20:info"></iron-icon>
        <div id="helpText"
            inner-h-t-m-l="[[getAriaLabelledHelpText_()]]">
        </div>
      </div>
    </template>
  </div>
</nearby-page-template>
